<template>
    <h1>reactive使用</h1>
    {{ cat }}
    <hr>
    小猫信息：
    名字：{{ cat.name }},
    年龄：{{ cat.age }}
    <button @click="cat.age+=10">年龄+10</button>
    <hr>
    <button @click="submitCat()">提交小猫信息</button>
</template>

<script setup>
import { reactive, toRaw } from 'vue';

const cat = reactive({
    name:"加菲猫",
    age:2
})

const submitCat=()=>{
    console.log(cat);
    console.log(toRaw(cat));
}
</script>

<style lang="scss" scoped>

</style>